<template>
  <div class="tags-menu" :style="{ left: clientX + 'px', top: clientY + 'px' }">
    <ul>
      <li @click="clickLi(index)" v-for="(item, index) in menuData" :key="index" v-show="isShowMenu(index, item)">
        <i :class="item.icon"></i>
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          icon: "el-icon-refresh-right",
          text: "刷新页面",
        },
        {
          icon: "el-icon-close",
          text: "关闭当前",
        },
        {
          icon: "el-icon-circle-close",
          text: "关闭其他",
        },
        {
          icon: "el-icon-back",
          text: "关闭左侧",
        },
        {
          icon: "el-icon-right",
          text: "关闭右侧",
        },
        {
          icon: "el-icon-circle-close",
          text: "全部关闭",
        },
      ],
    };
  },
  props: ["clientX", "clientY", "index", "tagsLength"],
  components: {},
  mounted() {},
  methods: {
    clickLi(i) {
      this.$emit('changeMenu', i)
    },
    isShowMenu(i) {
      if (this.tagsLength == 1) {
        return i == 0;
      }
      // 点击第一个标签(首页),隐藏关闭标签和关闭左侧
      if (this.index == 0) {
        return ![1, 3].includes(i)
      } else if (this.index == 1) {
      // 点击第2个标签,分两种
      // 1: 第2个标签也是最后一个标签,隐藏关闭左侧和右侧和关闭其他
      // 2: 第2个标签但不是最后一个,只要隐藏关闭左侧
        return this.tagsLength - 1 == this.index ? ![2,3,4].includes(i) : i != 3
      } else if(this.tagsLength - 1 == this.index) {
        // 点击最后一个个标签,隐藏关闭右侧
        return i != 4
      }
      return true
    },
  },
};
</script>
<style scoped lang='less'>
.tags-menu {
  position: absolute;
  ul {
    padding: 10px 0;
    background: #fff;
    box-shadow: 5px 5px 5px #eee;
    border-radius: 5px;
    li {
      padding: 8px 15px;
      cursor: pointer;
      &:hover {
        background: #ddd;
      }
    }
  }
}
</style>